<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
var isGeocode = true,//是否解析地址信息
	geoZoom = 15,//地图默认放缩等级
	geoTime = 5;//获取位置信息的间隔时间

var watchId,
	geoArr = [],
	geoPoint = [],
	geoArrLen = 0;

function geoInf( position ) {
	var str = "";
	var codns = position.coords;//获取地理坐标信息；
	
	var lat = codns.latitude;//获取到当前位置的纬度；
	str += "纬度："+lat+"\n";
	
	var longt = codns.longitude;//获取到当前位置的经度
	str += "经度："+longt+"\n";
	
	var sped = codns.speed;//获取设备的移动速度；
	str += "移动速度："+sped+"\n";
	
	str += "地址："+position.addresses+"\n";//获取地址信息
	str += "坐标类型："+position.coordsType+"\n";
	
	var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；
	str += "时间戳："+timeflag+"\n";
	
	str += "时间："+dateToStr(new Date(timeflag))+"\n";
		
	var alt = codns.altitude;//获取到当前位置的海拔信息；
	str += "海拔："+alt+"\n";
	
	var accu = codns.accuracy;//地理坐标信息精确度信息；
	str += "精确度："+accu+"\n";
	
	var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度；
	str += "海拔精确度："+altAcc+"\n";
	
	var head = codns.heading;//获取设备的移动方向；
	str += "移动方向："+head+"\n";

	console.log(JSON.stringify(position));
	outLine( str + "\n" + JSON.stringify(position) );
}
function getPos() {
	outSet( "获取位置信息:" );
	plus.geolocation.getCurrentPosition( geoInf, function ( e ) {
		outSet( "获取位置信息失败："+e.message );
	}, {geocode:isGeocode} );
}
function watchPos() {
	if ( watchId ) {
		return;
	}
	watchId = plus.geolocation.watchPosition( function ( p ) {
		outSet( "监听位置变化信息, " + geoTime + "秒一次:" );
		geoInf( p );
		
		var geoMyPoint = geoHandle(p);
		geoArr.push(geoMyPoint);//原始点数据
		geoPoint.push(new plus.maps.Point(geoMyPoint.lon, geoMyPoint.lat));//点坐标对象数据
		
		drawHandle();
	}, function ( e ) {
		outSet( "监听位置变化信息失败："+e.message );
	}, {maximumAge:geoTime * 1000, geocode:isGeocode} );
}
function clearWatch() {
	if ( watchId ) {
		outSet( "停止监听位置变化信息" );
		plus.geolocation.clearWatch( watchId );
		watchId = null;
	}
}
function resetMap(){
	geoArr.splice(0, geoArrLen);
	geoPoint.splice(0, geoArrLen);
	
	map.centerAndZoom(pcenter, geoZoom);
	map.reset();
}
function drawHandle() {
	map.reset();
	createMarker();
	map.centerAndZoom(geoPoint[geoPoint.length - 1], geoZoom);
}


//处理轨迹点
function geoHandle(pos) {
	geoArrLen = geoArrLen + 1;
	return {
		index: geoArrLen,//序号, 从1开始
		lon: pos.coords.longitude,//经度
		lat: pos.coords.latitude,//纬度
		accuracy: pos.coords.accuracy,//精确度(米),
		timestamp: pos.timestamp,//时间戳
		date: dateToStr(new Date(pos.timestamp))//日期
	};
}

function createMarker() {
	for (var i = 0; i < geoArrLen; i++) {
		var pos = geoArr[i],
			marker = new plus.maps.Marker(geoPoint[i]);
		
		marker.setIcon("/logo.png");
		marker.setLabel('==' + pos.index + '==');
		
		var bubble = new plus.maps.Bubble(pos.date);
		marker.setBubble(bubble);
		
		map.addOverlay(marker);
	}
}

var ws=null,wo=null;
var em=null,map=null,pcenter=null;
// H5 plus事件处理
function plusReady(){
	if(!em||ws){return};
	// 获取窗口对象
	ws=plus.webview.currentWebview();
	wo=ws.opener();
	//高德地图坐标为(116.3974357341,39.9085574220), 百度地图坐标为(116.3975,39.9074)
	pcenter = new plus.maps.Point(113.313353, 23.397994);
	setTimeout(function(){
		map=new plus.maps.Map("map");
		map.centerAndZoom(pcenter, geoZoom);
	},300);
}
if(window.plus){
	plusReady();
}else{
	document.addEventListener("plusready",plusReady,false);
}
// DOMContentloaded : 初始的 HTML 文档被完全加载和解析完成
document.addEventListener("DOMContentLoaded",function(){
	em=document.getElementById("map");
	window.plus&&plusReady();
},false);
		</script>
		<link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
		<style>
#map {
	width: 100%;
	height: 300px;
	line-height: 450px;
	text-align: center;
	background: #FFFFFF;
}
		</style>
	</head>
	<body>
		<ul class="dlist">
			<!--<li class="ditem" onclick="getPos()">获取设备位置信息</li>-->
			<li class="ditem" onclick="watchPos()">监听设备位置信息</li>
			<li class="ditem" onclick="resetMap()">清空地图</li>
			<li class="ditem" onclick="clearWatch()">停止监听</li>
		</ul>
		<div id="map" class="map">地图加载中...</div>
		<!--<p class="des">
			Android平台推荐配置高德或百度定位，避免在部分设备（如三星、HTC等）可能无法获取位置信息的问题。
		</p>-->
		<div id="output">
Geolocation可获取设备位置信息，包括经度、纬度、高度等信息。
		</div>
	</body>
</html>